<template>
    <view class="order">
        <uni-list :border="true">
            <uni-list-item
                v-for="(item, index) in checkList"
                :key="index"
                title=""
                rightText=""
                note=""
                thumb=""
                thumbSize="lg"
            >
                <template v-slot:header>
                </template>
                <template v-slot:body>
                    <view class="slot-box slot-text">
                        <view class="slot-box-row-1">
                            <view class="slot-box-row-1-left">
                                <image
                                    src="https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/logo.png" 
                                    :draggable="false"
                                    mode="scaleToFill"
                                    class="slot-img-1"
                                ></image>
                                <view class="slot-box-row-1-left-text">许愿池</view>
                            </view>
                            <view class="slot-box-row-1-right">
                            </view>
                        </view>
                        <view class="slot-box-row-3">
                            <!-- <image
                                :src="item.zsw_ex2.split(',')[0]" 
                                :draggable="false"
                                mode="scaleToFill"
                                class="slot-box-row-3-img-1"
                            ></image> -->
                            <view class="slot-box-row-3-box-1">
                                <view class="slot-box-row-2 slot-text-color-1">
                                    许愿时间：{{ item.zsw_create_time.split(' ')[0] }}
                                </view>
                                <view class="slot-box-row-2 slot-text-color-1">
                                    许愿商品：{{ item.zsw_ex1 }}
                                </view>
                            </view>
                        </view>
                        
                        
                        <view class="slot-box-row-7 slot-text-color-1">
                            <view
                                class="iconfont icon-shanchu"
                                :class="['slot-icon-2-1']"
                                @click="deleteOrder(item, index)"
                            ></view>
                            <view style="display: flex; align-items: center;">
                                <!-- <view style="font-size: 24rpx;">
                                    详情
                                </view> -->
                                <!-- <button
                                    type="default"
                                    plain
                                    class="slot-btn"
                                    @click=""
                                >
                                    费用详情
                                </button> -->
                                <!-- <button
                                    type="primary"
                                    plain
                                    disabled
                                    class="slot-btn"
                                    @click="payOrder(item)"
                                >
                                    支付
                                </button> -->
                                
                            </view>
                        </view>
                    </view>
                </template>
                <!-- <template v-slot:footer>
                    <view class="btn-box">
                        <button
                            type="primary"
                            class="btn"
                            @click="payOrder(item)"
                        >
                            支付
                        </button>
                    </view>
                </template> -->
            </uni-list-item>
        </uni-list>
        <uni-load-more :status="status"></uni-load-more>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
    import { markRaw, reactive, ref } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { getWishGoodsListApi, delShopWishApi } from '@/apis'
    const formData:Ref<any> = ref({})
    const checkList:Ref<any> = ref([
        // content: [
        //     {
        //         staffName: '服务通知',
        //         studyTime: '暂无消息',
        //         badgeText: 1,
        //         id: 1
        //     }
        // ]
    ])
    const status: Ref<string> = ref('loading') //more: 加载前 loading: 加载中 no-more: 没有更多数据
    const pageNo: Ref<number> = ref(1)
    const pageSize: Ref<number> = ref(20)
    
    
    onShow(() => {
        status.value = 'loading'
        getWishGoodsListApi({
           notNeedPage: false, //是否不需要分页
           pageNo: pageNo.value, //第几页,默认从1开始
           pageSize: pageSize.value, //每页几条
           // sortField: '' //排序字段
        }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
           if (res.data.length == pageSize.value) {
               status.value = 'more'
           } else {
               status.value = 'no-more'
           }
        }).catch(e => {
            status.value = 'no-more'
        }).finally(() => {
            // status.value = 'no-more'
        })
    })

    // 下拉刷新重新加载数据
    onPullDownRefresh(() => {
       status.value = 'loading'
       pageNo.value = 1
       getWishGoodsListApi({
           notNeedPage: false, //是否不需要分页
           pageNo: pageNo.value, //第几页,默认从1开始
           pageSize: pageSize.value, //每页几条
           // sortField: '' //排序字段
       }).then((res: any) => {
           console.log(res.data)
           checkList.value = res.data
           
           if (res.data.length == pageSize.value) {
               status.value = 'more'
           } else {
               status.value = 'no-more'
           }
       }).catch((e) => {
            status.value = 'no-more'
        }).finally(() => {
            // status.value = 'no-more'
            uni.stopPullDownRefresh();
        })
    })


    // 上拉加载数据
    onReachBottom(() => {
       if (status.value = 'more') {
           status.value = 'loading'
           pageNo.value++
           getWishGoodsListApi({
                notNeedPage: false, //是否不需要分页
                pageNo: pageNo.value, //第几页,默认从1开始
                pageSize: pageSize.value, //每页几条
                // sortField: '' //排序字段
           }).then((res: any) => {
               console.log(res.data)
               checkList.value.push(...res.data)
               if (res.data.length == pageSize.value) {
                   status.value = 'more'
               } else {
                   status.value = 'no-more'
               }
           }).catch((e) => {
                status.value = 'no-more'
            }).finally(() => {
                // status.value = 'no-more'
            })
       }
       
    })
    const payOrder = () => {
        // 支付
    }
    const deleteOrder = (val, index) => {
        // 删除
        uni.showModal({
            showCancel: true,
            title: '温馨提示',
            content: '请确认是否删除！', 
            success: function (res) {
                if (res.confirm) {
                    checkList.value.splice(index, 1)
                    delShopWishApi({
                        wishId: val.zsw_id
                    })
                    // 调删除接口
                } else if (res.cancel) {
                    console.log('用户点击取消');
                }
            }
        });
       
    }
</script>

<style lang="scss" scoped>
    .order {
        min-height: 100vh;
        background-color: #f2f2f2;
    }
    .my-segmented-control {
        width: 100%;
        position: fixed; 
        top: 0;
        z-index: 100;
        background-color: #f2f2f2;
    }
    .my-segmented-control-box {
        height: 80rpx;
    }
    .btn-box {
        display: flex;
        justify-content: center;
        align-items: center;
        .btn {
            width: 100rpx;
            height: 60rpx;
            display: flex;
            font-size: 30rpx;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    /* list样式修改 */
    .slot-box {
        // margin-top: 10rpx;
        flex: 1;
    	display: flex;
    	flex-direction: column;
        background: rgb(255, 255, 255);
        border-radius: 40rpx;
        box-sizing: border-box;
        padding: 20rpx;
        .slot-box-row-1 {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            border-bottom: 1rpx solid #fff5f5;
            box-sizing: border-box;
            padding: 12rpx 0;
            .slot-box-row-1-left {
                display: flex;
                align-items: center;
                .slot-img-1 {
                    width: 40rpx;
                    height: 40rpx;
                }
                .slot-box-row-1-left-text {
                    // color: #999;
                    box-sizing: border-box;
                    padding-left: 10rpx;
                }
            }
            .slot-box-row-1-right {
                color: #999;
            }
        }
        .slot-box-row-3 {
            display: flex;
            align-items: center;
            .slot-box-row-3-img-1 {
                width: 180rpx;
                height: 180rpx;
            }
            .slot-box-row-3-box-1 {
                flex: 1;
            }
        }
        .slot-box-row-2 {
            display: flex;
        }
    }
    .slot-text {
    	font-size: 30rpx;
        .slot-text-color-1 {
            color: #535353;
            padding: 10rpx 0;
            font-size: 26rpx;
        }
        .slot-text-color-2 {
            color: #999;
        }
    }
    .slot-box-row-7 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .slot-icon-2-1 {
            font-size: 40rpx;
            color: #000;
        }
        .slot-icon-2-2 {
            font-size: 40rpx;
            color: rgb(219, 219, 219);
        }
        .slot-btn {
            margin: 0;
            font-size: 20rpx;
        }
    }
    
    
    :deep(.uni-list) {
        // margin-top: 10rpx;
        background-color: rgba(0, 0, 0, 0) !important;
        .uni-list-item {
            background-color: rgba(0, 0, 0, 0) !important;
        }
    }
    :deep(.uni-list-item__container) {
        padding: 10rpx 10rpx !important;
    }
    // 列表标题title,note
    :deep(.uni-list-item__content-title) {
        font-size: 30rpx;
    }
    :deep(.uni-list-item__content-note) {
        font-size: 30rpx;
    }
    :deep(.uni-list--border:after) {
        background-color: rgba(0,0,0,0) !important;
    }
    .my-popup-box {
        background: #fff; 
        width: 600rpx; 
        box-sizing: border-box; 
        padding: 0 0 30rpx 0; 
        border-radius: 40rpx;
        .my-popup-box-img {
            background: url(https://jdzy.tianxunwang.com/business/image/jdzy/applet/static/transshipmentInformation/popup-bg-2.png); 
            background-size:100% 100%; 
            width:100%; 
            height: 150rpx; 
            border-radius: 50rpx 50rpx 0 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .my-popup-box-img-text {
                font-size: 30rpx;
                letter-spacing: 10rpx;
                font-weight: bold;
            }
        }
        .my-popup-box-content {
            font-size: 26rpx; 
            box-sizing: border-box; 
            padding: 30rpx;
            .my-popup-box-content-text-1 {
                padding-bottom: 20rpx;
            }
        }
    }
</style>
